<template>
    <div class="container">
        <Map class="map-container" :mapData="mapData"></Map>
        <div class="container-wapper">
            <div class="top">
                <img class="top-bg" src="@/assets/images/visual/top.png" alt="">
                <img class="top-title" src="@/assets/images/visual/top-title.png" alt="">
            </div>
            <VisuContent title="数据看板" class="lefta warpper-flex">
                <div class="su-content">
                    <Count class="su-content-count" v-for="(item, index) in dataA" :key="index" :config="item" :icon="item.icon" :title="item.title"></Count>
                </div>
            </VisuContent>
            <VisuContent title="每月入驻酒店数量" class="leftb warpper-flex">
                <dv-charts class="leftb-chart" ref="chart1" :option="optionA" />
            </VisuContent>
            <VisuContent title="每月入驻人数统计" class="leftc warpper-flex">
                <dv-charts class="leftb-chart" :option="optionB" />
            </VisuContent>
            <VisuContent title="最新入住记录" class="righta warpper-flex">
                <div class="righta-table">
                    <dv-scroll-board class="table" :config="config" />
                </div>
            </VisuContent>
            <VisuContent title="外来人员分析" class="rightb warpper-flex">
                <div class="rightb-content">
                    <VuePoress v-for="(item, index) in configRightB" :key="index" class="rightb-chart" :id="`chart${index}`" :config="item"></VuePoress>
                </div>
            </VisuContent>
            <div class="bottom">
                <img class="bottom-bg" src="@/assets/images/visual/bottom-bg.png" alt="">
                <div class="bottom-content">
                    <div class="bottom-content-left">
                        <div class="time">{{ hourMiniterSeconds }}</div>
                    </div>
                    <div class="bottom-content-right">
                        <div class="week">{{ weekDay }}</div>
                        <div class="date">{{ yearMonthDay }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ScaleBox from '@/components/scaleBox/index.vue'
import Map from '@/components/visual/map.vue'
import VisuContent from '@/components/visual/visuContent.vue'
import Count from '@/components/visual/components/count.vue'
import VuePoress from '@/components/visual/components/poress.vue'
import axios from 'axios'
import { fontSizeRem } from '@/utils/rem.js'
export default {
    data() {
        return {
            timer: null,
            config: {
                header: ['入住时间', '入住酒店', '入住人数', '所属辖区'],
                columnWidth: [],
                headerHeight: 41,
                rowNum: 10,
                headerBGC: '',
                oddRowBGC: '',
                evenRowBGC: 'linear-gradient( 270deg, rgba(0,150,214,0) 0%, rgba(0,150,214,0.62) 51%, rgba(0,150,214,0) 100%)',
                data: [
                    ['2024-05-20 09:23', 'TOWO上品酒店', '3人', '西郊街道'],
                    ['2024-05-20 08:23', '景德镇弄瓷艺术…', '1人', '西郊街道'],
                    ['2024-05-20 00:15', '玉凯年民宿', '2人', '吕蒙街道'],
                    ['2024-05-19 21:02', '暖莲裳民宿', '2人', '西郊街道'],
                    ['2024-05-19 20:58', '暖莲裳民宿', '5人', '西郊街道'],
                    ['2024-05-19 15:23', '景德镇永盛酒店', '1人', '西郊街道'],
                    ['2024-05-19 14:00', '故屿·柒间民宿', '2人', '吕蒙街道'],
                    ['2024-05-19 13:48', '景德镇鑫百度酒…', '2人', '吕蒙街道'],
                    ['2024-05-19 13:08', '禧凡酒店(景德镇…', '3人', '昌江街道'],
                    ['2024-05-19 13:00', '玉凯年民宿', '3人', '吕蒙街道'],
                    ['2024-05-19 13:00', '玉凯年民宿', '3人', '吕蒙街道'],
                ]
            },
            // 地图覆盖物
            mapData: [],
            yearMonthDay: '',//年月日数据
            hourMiniterSeconds:'',//时分秒数据
            optionA: {
                // title: {
                //     text: '单位：家'
                // },
                xAxis: {
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    boundaryGap: false, // 不留白，从原点开始
                    nameTextStyle: {
                        fill: '#BCBDBF',
                        fontSize: 12
                    },
                    splitLine: { //网格线：隐藏
                        show: true,
                        style: {
                            stroke: 'rgba(31, 54, 64, 1)',
                            type: 'dashed', // 线型为虚线
                            lineDash: [5, 5]
                        }
                    },
                    axisLabel: {
                        style: {
                            fill: '#BCBDBF',
                            fontSize: 12,
                            rotate: 0
                        }
                    },
                    axisLine: {
                        style: {
                            stroke: 'rgba(135, 211, 255, 1)',
                        }
                    },
                    axisTick: {
                        stroke: '#0092FE',
                        lineWidth: 1
                    }
                },
                yAxis: {
                    name: '单位：家',
                    data: 'value',
                    nameTextStyle: {
                        fill: '#BCBDBF',
                        fontSize: 12
                    },
                    axisLabel: {
                        style: {
                            fill: '#BCBDBF',
                            fontSize: 12,
                            rotate: 0
                        }
                    },
                    axisLine: {
                        style: {
                            stroke: 'rgba(31, 54, 64, 1)',
                            type: 'dashed', // 线型为虚线
                            lineDash: [5, 5]
                        }
                    },
                    splitLine: { //网格线：隐藏
                        style: {
                            stroke: 'rgba(31, 54, 64, 1)',
                            type: 'dashed', // 线型为虚线
                            lineDash: [5, 5]
                        }
                    },
                },
                series: [
                    {
                        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                        type: 'line',
                        smooth: true,
                        linePoint: {
                            show: false
                        },
                        lineStyle: {
                            stroke: '#2AEFFD',
                        },
                        lineArea: {
                            show: true,
                            gradient: ['rgba(42, 239, 253, 1)', 'rgba(42, 239, 253, 0)']
                        }
                    }
                ]
            },
            optionB: {
                xAxis: {
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    boundaryGap: false, // 不留白，从原点开始
                    nameTextStyle: {
                        fill: '#BCBDBF',
                        fontSize: 12
                    },
                    splitLine: { //网格线：隐藏
                        show: true,
                        style: {
                            stroke: 'rgba(31, 54, 64, 1)',
                            type: 'dashed', // 线型为虚线
                            lineDash: [5, 5]
                        }
                    },
                    axisLabel: {
                        style: {
                            fill: '#BCBDBF',
                            fontSize: 12,
                            rotate: 0
                        }
                    },
                    axisLine: {
                        style: {
                            stroke: 'rgba(135, 211, 255, 1)',
                        }
                    },
                    axisTick: {
                        stroke: '#0092FE',
                        lineWidth: 1
                    }
                },
                yAxis: {
                    name: '单位：人',
                    data: 'value',
                    nameTextStyle: {
                        fill: '#BCBDBF',
                        fontSize: 12
                    },
                    axisLabel: {
                        style: {
                            fill: '#BCBDBF',
                            fontSize: 12,
                            rotate: 0
                        }
                    },
                    axisLine: {
                        style: {
                            stroke: 'rgba(31, 54, 64, 1)',
                            type: 'dashed', // 线型为虚线
                            lineDash: [5, 5]
                        }
                    },
                    splitLine: { //网格线：隐藏
                        style: {
                            stroke: 'rgba(31, 54, 64, 1)',
                            type: 'dashed', // 线型为虚线
                            lineDash: [5, 5]
                        }
                    },
                },
                series: [
                    {
                        data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                        type: 'line',
                        smooth: true,
                        linePoint: {
                            show: false
                        },
                        lineStyle: {
                            stroke: '#FDD15D',
                        },
                        lineArea: {
                            show: true,
                            gradient: ['rgba(253, 209, 93, 1)', 'rgba(42, 239, 253, 0)']
                        }
                    }
                ]
            },
            dataA: [
                {
                    title: '总入驻酒店数',
                    icon: require('@/assets/images/visual/left-a.png'),
                    number: 350,
                    subTitle: '家'
                },
                {
                    title: '总入住人数',
                    icon: require('@/assets/images/visual/left-b.png'),
                    number: 52460,
                    subTitle: '人'
                },
                {
                    title: '本月入住人数',
                    icon: require('@/assets/images/visual/left-c.png'),
                    number: 8754,
                    subTitle: '人'
                },
                {
                    title: '本月新增酒店',
                    icon: require('@/assets/images/visual/left-d.png'),
                    number: 7,
                    subTitle: '家'
                },
            ],
            configRightB: [
                {
                    city: '四川省',
                    number: 58215,
                    color: [
                        'rgba(255, 159, 57, 1)', 
                        'rgba(255, 197, 100, 1)', 
                        'rgba(255, 226, 151, 1)', 
                        'rgba(255, 204, 70, .5)', 
                        'rgba(255, 204, 70, .2)'
                    ],
                    max: 100000,
                    data: [58215]
                },
                {
                    city: '湖南省',
                    number: 35540,
                    color: [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ],
                    max: 100000,
                    data: [35540]
                },
                {
                    city: '浙江省',
                    number: 21895,
                    color: [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ],
                    max: 100000,
                    data: [21895]
                },
                {
                    city: '广东省',
                    number: 19879,
                    color: [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ],
                    max: 100000,
                    data: [19879]
                },
                {
                    city: '重庆市',
                    number: 18458,
                    color: [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ],
                    max: 100000,
                    data: [18458]
                },
                {
                    city: '贵州省',
                    number: 9580,
                    color: [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ],
                    max: 100000,
                    data: [9580]
                },
                {
                    city: '贵州省',
                    number: 9580,
                    color: [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ],
                    max: 100000,
                    data: [9580]
                },
            ],
            heightBox: 1080,
            widthBox: 1920,
            // 大屏数据
            screenData: null
        }
    },
    components: {
        ScaleBox,
        Map,
        VisuContent,
        Count,
        VuePoress
    },
    computed:{
        weekDay(){
            let days = ['周日','周一','周二','周三','周四','周五','周六'];
            let today = new Date();
            let weekday = today.getDay();
            return days[weekday];
        }
    },
    created() {
        // console.log(window.innerHeight);
        this.heightBox = window.innerHeight
        this.widthBox = window.innerWidth
        if (this.timer) {
            clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
           //年月日
            this.getYearMonthDay();
            //时分秒
            this.currentDate();
        }, 1000);
        this.init()
        // window.addEventListener("resize",()=>{
        //     this.init();
        // })
    },
    mounted() {
       
    },
    methods: {
        // fontSizeRem(size) {
        //     const clientWidth = window.innerWidth || document.documentElement.clientWidth ||
        //         document.body.clientWidth;
        //     if (!clientWidth) return;
        //     let fontSize = clientWidth / 1920;//尺寸大小
        //     return size * fontSize;
        // },
        init() {
            axios.get('/api/olroom/backend/public/index.php/admin/screen').then(res => {
                console.log(fontSizeRem(12))
                if (res.status == 200 && res.data.error == 0) {
                    this.screenData = res.data.data
                    // 数据看板
                    this.dataA[0].number =  this.screenData.sjkb.total_business_count
                    this.dataA[1].number =  this.screenData.sjkb.total_people_count
                    this.dataA[2].number =  this.screenData.sjkb.month_people_count
                    this.dataA[3].number =  this.screenData.sjkb.month_business_count

                    // 每月入驻酒店数量
                    this.optionA = {
                        ...this.optionA,
                        grid:{
                            top : '13%',    //距离容器上边界40像素
                            bottom: '10%',   //距离容器下边界30像素
                            left: '5%',
                            right: '5%'
                        },
                        xAxis: {
                            ...this.optionA.xAxis,
                            axisLabel: {
                                style: {
                                    ...this.optionA.xAxis.axisLabel.style,
                                    fontSize: fontSizeRem(12)
                                }
                            },
                            data: this.screenData.month_business_list.map(v => v.month),
                        },
                        yAxis: {
                            ...this.optionA.yAxis,
                            nameTextStyle: {
                                ...this.optionA.yAxis.nameTextStyle,
                                fontSize: fontSizeRem(12)
                            },
                            axisLabel: {
                                style: {
                                    ...this.optionA.yAxis.axisLabel.style,
                                    fontSize: fontSizeRem(12)
                                }
                            }
                        },
                        series: [
                            {
                                data: this.screenData.month_business_list.map(v => v.count),
                                type: 'line',
                                smooth: true,
                                linePoint: {
                                    show: false
                                },
                                connectNulls: true, // 连接null值的点
                                lineStyle: {
                                    stroke: '#2AEFFD',
                                },
                                lineArea: {
                                    show: true,
                                    gradient: ['rgba(42, 239, 253, 1)', 'rgba(42, 239, 253, 0)']
                                }
                            }
                        ]
                    }
                    // 每月入驻人数
                    this.optionB = {
                        ...this.optionB,
                        grid:{
                            top : '13%',    //距离容器上边界40像素
                            bottom: '10%',   //距离容器下边界30像素
                            left: '5%',
                            right: '5%'
                        },
                        xAxis: {
                            ...this.optionB.xAxis,
                            axisLabel: {
                                style: {
                                    ...this.optionB.xAxis.axisLabel.style,
                                    fontSize: fontSizeRem(12),
                                }
                            },
                            data: this.screenData.month_people_list.map(v => v.month),
                        },
                        yAxis: {
                            ...this.optionB.yAxis,
                            nameTextStyle: {
                                ...this.optionB.yAxis.nameTextStyle,
                                fontSize: fontSizeRem(12)
                            },
                            axisLabel: {
                                style: {
                                    ...this.optionB.yAxis.axisLabel.style,
                                    fontSize: fontSizeRem(12)
                                }
                            }
                        },
                        series: [
                            {
                                data: this.screenData.month_people_list.map(v => v.count),
                                type: 'line',
                                smooth: true,
                                linePoint: {
                                    show: false
                                },
                                connectNulls: true, // 连接null值的点
                                lineStyle: {
                                    stroke: '#FDD15D',
                                },
                                lineArea: {
                                    show: true,
                                    gradient: ['rgba(253, 209, 93, 1)', 'rgba(42, 239, 253, 0)']
                                }
                            }
                        ]
                    }
                    // 最新入驻记录
                    const checkinList = []
                    this.screenData.last_checkin_list.forEach(v => {
                        checkinList.push([v.checkin_time, v.shop_name, v.checkin_count + '人', v.area_name])
                    })
                    this.config = {
                        ...this.config,
                        data: checkinList
                    }
                    // 外来人员分析
                    // 多人员流量颜色
                    const color1 = [
                        'rgba(255, 159, 57, 1)', 
                        'rgba(255, 197, 100, 1)', 
                        'rgba(255, 226, 151, 1)', 
                        'rgba(255, 204, 70, .5)', 
                        'rgba(255, 204, 70, .2)'
                    ]
                    // 正常流量颜色
                    const color2 = [
                        'rgba(0, 104, 223, 1)', 
                        'rgba(3, 233, 224, 1)', 
                        'rgba(138, 255, 250, 1)', 
                        'rgba(165, 255, 251, .5)', 
                        'rgba(165, 255, 251, .2)'
                    ]
                    this.configRightB = this.screenData.province_people_list.map(v => {
                        return {
                            city: v.province,
                            number: v.count,
                            color: color2,
                            max: 100000,
                            data: [v.count]
                        }
                    })
                    
                    // 地图
                    this.mapData = this.screenData.map_business_list || []
                }
            })
        },
        //获取年月日的方法
        getYearMonthDay() {
            const today = new Date();
            // 获取当前时间(today)的年份
            const year = today.getFullYear();
            // 获取月份
            // const month = String(today.getMonth() + 1).padStart(2, '0');
            const month = String(today.getMonth() + 1);
            // 获取当前日
            // const day = String(today.getDate()).padStart(2, '0');
            const day = String(today.getDate());
            // 得到年月日
            this.yearMonthDay =  `${year}.${month}.${day}`; //打印当前日期
        },
        //获取时分秒的方法
        currentDate() {
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth();
            month = month + 1 > 12 ? 1 : month + 1;
            month = month > 9 ? month : "0" + month.toString();
            var day = d.getDate();
            var hour = d.getHours();
            hour = hour > 9 ? hour : "0" + hour.toString();
            var minute = d.getMinutes();
            minute = minute > 9 ? minute : "0" + minute.toString();
            var second = d.getSeconds();
            second = second > 9 ? second : "0" + second.toString();
            this.hourMiniterSeconds =  `${hour}:${minute}:${second}`;
        },
    },
    destroyed() {
        if (this.timer) {
            clearInterval(this.timer)
        }
    }
}
</script>
<style scoped lang="less">
.container {
    position: relative;
    height: 100vh;
    width: 100vw;
    .map-container {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
    }
    .container-wapper {
        position: absolute;
        z-index: 11;
        width: 100%;
        .top {
            position: relative;
            .top-bg {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 158px;
                z-index: 11;
            }
            .top-title {
                width: 521px;
                height: 61.5px;
                position: absolute;
                left: 50%;
                top: 12px;
                transform: translateX(-50%);
                z-index: 12;
            }
        }
        .bottom {
            position: fixed;
            height: 100px;
            width: 100%;
            bottom: 0;
            .bottom-bg {
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
            }
            .bottom-content {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
                height: 50px;
                display: flex;
                opacity: .6;
                .bottom-content-left {
                    width: 135px;
                    .time {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        font-size: 36px;
                        color: #FFFFFF;
                        line-height: 50px;
                        text-align: right;
                        font-style: normal;
                    }
                }
                .bottom-content-right {
                    margin-left: 17px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: justify;
                    .week {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 20px;
                        text-align-last: justify;
                        text-align: justify;
                    }
                    .date {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 20px;
                    }
                }
            }
        }
    }
}
.lefta {
    height: 272px;
    position: absolute;
    left: 24px;
    top: 70px;
}
.leftb {
    height: 285px;
    position: absolute;
    left: 24px;
    top: 365px;
}
.leftc {
    height: 285px;
    position: absolute;
    left: 24px;
    top: 675px;
}
.righta {
    height: 480px;
    position: absolute;
    right: 24px;
    top: 70px;
}
.rightb {
    position: absolute;
    right: 24px;
    top: 578px;
}
.su-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 40px;
    .su-content-count {
        width: 50%;
    }
}
.leftb-chart {
    width: 100%;
    height: 100%;
    z-index: 122;
}
.righta-table {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    .table {
        width: 100%;
        height: 100%;
        /deep/ .header {
            .header-item {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #BFDBEF;
                line-height: 17px;
            }
        }
        /deep/ .rows {
            .row-item {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #BFDBEF;
                line-height: 20px;
                &:nth-of-type(even) {
                    background: linear-gradient( 270deg, rgba(0,150,214,0) 0%, rgba(0,150,214,0.3) 51%, rgba(0,150,214,0) 100%);
                    
                }
            }
        }
    }
}
.rightb {
    height: 385px;
    /deep/ .visul-content {
        padding: 20px;
        overflow-y: auto;
        &::-webkit-scrollbar{
            width: 5px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            height: 20px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #468FA4;
        }
        &::-webkit-scrollbar-track {
            background: #BFDBEF;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }
    }
}
.rightb-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .rightb-chart {
        margin-bottom: 4px;
    }
}
.warpper-flex {
    width: 25%;
}
</style>